//顶部导航
.topnav {
    height: 30px;
    line-height: 30px;
    background-color: #D9D9D9;

    .rightnav {
        a {
            padding: 0 14px;

            &:hover {
                color: #DD302D;
            }
        }

        li:last-child a {
            padding-right: 0;
        }

        //二级导航
        li {
            position: relative;


            &:hover .second_menu {
                display: block;
            }

            .second_menu {
                position: absolute;
                width: 300px;
                height: 150px;
                top: 32px;
                left: 0;
                background-color: aquamarine;
                border-radius: 15px;
                display: none;
                z-index: 2;
            }
        }

    }
}

.searchbox {
    overflow: hidden;
    box-shadow: 0px 6px 6px 0px #CACACA3F;

    .left_middle {
        width: 690px;
        height: 133px;

        padding-top: 20px;
        box-sizing: border-box;

        // 搜索框
        .search_input {
            position: relative;
            height: 36px;
            border: 1px solid #DD302D;
            
            float: left;

            input[type="text"] {
                width: 511px;
                height: 36px;
                padding-left: 10px;
                box-sizing: border-box;
                float: left;
            }

            input[type="button"] {
                width: 79px;
                height: 36px;
                background-color: #DD302D;
                float: left;
            }

            span {
                position: absolute;
                top: 50%;
                right: 30px;
                color: #fff;
                margin-top: -8px;
            }
        }


        .car {
            width: 90px;
            height: 36px;
            line-height: 36px;
            border: 1px solid #DD302D;
            float: right;
            box-sizing: border-box;
            font-size: 12px;
            color: #DD302D;
            text-align: center;
        }


        //热词搜索
        .hot_words {
            float: left;
            margin-top: 10px;

            a {
                margin-right: 10px;
                font-size: 10px;
            }
        }

        //主体导航
        .main_nav {
            float: left;
            margin-top: 20px;

            li {
                float: left;
                margin-right: 10px;
            }
        }
    }

    .right_box {
        width: 290px;
        height: 133px;

    }

}

//页面主题区域
.main_body {
    
    background-color: #f3f3f3;

    .w {

      //第一个广告区域
        .banner {

            margin-top: 16px;

            .pub_banner1 {
                width: 190px;
                height: 458px;
                background-color: #fff;

                ul {

                    li {
                        height: 28px;
                        line-height: 28px;
                        padding: 0 16px;

                        &:hover {
                            background-color: #DD302D;

                            a {
                                color: blue;
                            }
                        }

                    }
                }
            }

            .pub_banner2 {
                width: 590px;
                height: 458px;

                margin: 0 10px;
            }

            .pub_banner3 {
                width: 190px;
                height: 458px;

                a:nth-child(2) {
                    margin: 10px 0;
                    display: block;
                }
            }

            .pub_banner4 {
                width: 170px;
                height: 458px;
                border: 1px solid red;
                margin-left: 10px;

                //用户信息
                .userinfo{
                    width: 150px;
                    height: 84px;
                   
                    margin: 20px auto;
                    .top_msg{

                       img{
                        float: left;
                       }
                       p{
                        float: left;
                        font-size: 12px;
                        margin-left: 10px;
                       }
               
                    }
                    .bot_show{
                       span{
                        width: 64px;
                        height: 22px;
                        text-align: center;
                        line-height: 22px;
                        font-size: 12px;
                        background-color: #DD302D;
                        float: left;
                        color: #fff;
                        margin-top: 15px;
                        margin-left: 6px;
                        border-radius: 10px;
                       
                       }
                       span:last-child{
                        background-color: #363634;
                        color: #BEB482;
                       }
                    }
                }

                //御码快报
                .newlist{
                    width: 170px;
                    
                    margin: 0 auto;
                    margin-top: -10px;
                  

                //标题
                .newstitle{
                    margin-bottom: 10px;

                    h4{
                        float: left;
                    }
                    a{
                        float: right;
                    }

                }


                .content{
                    li{
                         margin-bottom: 4px;
                        p{
                            float: left;
                            width: 120px;
                            word-break: keep-all;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            margin-left: 6px;
                        }
                        span{
                            width: 44px;
                            height: 22px;
                            float: left;
                            text-align: center;
                            line-height: 22px;
                            background-color: #FFE7E7;
                        }
                    }
                }
                }


                //服务列表区域
                .service{
                    width: 170px;
                    height: 180px;
                    
                    margin: 15px auto 0;

                    li{
                        width: 36px;
                        height: 46px;
                        font-size: 12px;
                        text-align: center;
                        float: left;
                        margin-right: 8px;
                        margin-bottom: 12px;

                        &:nth-child(4n){
                            margin-right: 0;
                        }

                        &:nth-child(n+9){
                            margin-bottom: 0;
                        }
                        span:first-child{
                            width: 28px;
                            height: 28px;
                            display: block;
                            background: url(../img/侧边栏图标_默认@1x.png) no-repeat;
                            margin: 0 auto;

                            &:hover{
                                background: url(../img/侧边栏图标_hover@1x.png);
                            }
                        }
                        &:nth-child(2){
                            span:first-child{
                                background-position: -38px 0;
                            }
                        }
                    }

                }
                

            }
        }

        //秒杀区域
        .kill{
            height: 266px;
            background-color: #fff;
            margin: 15px 0;

            .leftkill{
                width: 190px;
                height: 266px;
                position: relative;

                h4{
                    position: absolute;
                    left: 50%;
                    top: 25%;
                    margin-left: -52px;
                    margin-top: -30px;
                    font-size: 26px;
                    color: #fff;
                }
            }


            .middlekill{
                li{
                    width: 190px;
                    height: 266px;
                    background-color: #fff;
                    text-align: center;
                    float: left;
                    margin-left: 10px;
                    img{
                        margin-top: 20px;
                    }
                    p{
                      width: 190px;
                      height: 18px;
                      font-size: 14px;
                      color: #000000;
                      word-break: keep-all;
                      white-space: nowrap;
                      overflow: hidden;
                      
                      text-overflow: ellipsis;

                      margin-top: 15px;
                      

                     
                        
                      }
                      .last1{
                        color: #DD302D;
                    }
                }
            }
            .rightkill{
                width: 190px;
                height: 266px;
            }
        }


       
    }
     //年货节
        .year_good{
            width: 1270px;
            height: 555px;
            background: url(../img/年货推荐_背景@1x.png) no-repeat;
            margin: 0 auto;
            ul{
                padding: 110px 40px 0;
            }

            li{
                width: 190px;
                height: 210px;
                background: url(../img/年货产品背景框框@1x.png) no-repeat;

                text-align: center;
                float: left;
                margin-right: 10px;
                &:nth-child(6n){
                   margin-right: 0;
                }
                &:nth-child(-n+6){
                    margin-bottom: 10px;
                }

                img{
                    margin-top: 20px;
                }
                p:nth-child(2){
                    width: 190px;
                    height: 32px;
                    line-height: 32px;
                    color: #fff;
                    background: url(../img/年货产品_免息横幅@1x.png);
                }
                p:nth-child(3){
                    color: #DD302D;
                    font-weight: 700;
                    margin-top: 10px;
                }
               
            }
        }

        //每日特价
        .day_prive{
            
            margin: 15px 0;
            background-color: #ffffff;
            .privebox{
                width: 590px;
                height: 318px;
                background-color: #fff;
                padding: 10px;
                box-sizing: border-box;
                margin-right: 5px;
                &:last-child{
                    margin-right: 0;
                }
                .title{
                    height: 34px;
                    width: 590px;
                    
                    
                    h4{
                        font-size: 24px;

                    }

                    img{
                        margin-top: 8px;
                        margin-left: 5px;
                    }

                    a{
                        float: right;
                        color: #DD302D;
                        font-weight: 700;
                        margin-top: 10px;
                        margin-right: 30px;
                    }


                }

                .content{

                    
                   //左
                    .left_content{
                        width: 180px;
                        height: 254px;
                        background-color: #F8F8F8;
                        margin-top: 10px;
                        margin-left: -100px;
                        
                        

                        .content_other{
                            text-align: center;
                            margin-top: 10px;
                           
                            p:nth-child(2){
                                text-align: center;
                              
                                font-size: 14px;
                                font-weight: 700;
                                
                                margin-top: 15px;
                            }
                             p:nth-child(3){
                                color: #DD302D;
                                font-size: 16px;
                                font-weight: 700;
                                margin-top: 10px;
                             }
                             p:nth-child(4){
                                color: #CCCCCC;
                                font-size: 12px;
                                margin-top: 10px;
                             }
                        }
                    }

                    //右侧区域
                    .right_content{
                        width: 390px;
                        height: 254px;
                        margin-right: 10px;
                        padding-top: 32px;
                        box-sizing: border-box;


                        .item{
                            width: 190px;
                            height: 90px;
                            float: left;
                           margin-right: 5px;
                           margin-bottom: 10px;
                        }
                        &:nth-child(2n){
                            margin-right: 0;
                        }
                        p:nth-child(2){
                            font-size: 12px;
                            font-weight: 700;
                            color: #000000;
                        }
                        p:nth-child(3){
                            font-size: 16px;
                            color: #DD302D;
                            font-weight: 700;
                        }
                        p:nth-child(4){
                            font-size: 12px;
                            color: #CCCCCC;

                        }
                        p{
                            width: 90px;
                        }
                    }
                }
            }
        }

        //全球购
        .shopping{
            width: 1190px;
            height: 620px;
            background-color: #fff;
           position: relative;

            .shopping_nav{
                width: 100%;
                height: 60px;
                
                line-height: 60px;

                p{
                text-align: center;    font-size: 28px;
                    color: #000000;
                    font-weight: 700;
                }
            }

            .left_shopping{
               
                
                .left_shop,.right_shop{
                    width: 290px;
                    height: 370px;
                    margin-right: 10px;
                }
            }

            .right_shopping{

                .rightshop{
                   width: 290px;
                   height: 180px;
                   margin-right: 10px;

                   &:last-child{
                    margin-right: 0;
                   }
                   
                  .top_shop{
                    display: block;
                    width: 290px;
                    
                   p{
                     float: left;
                   }

                    p:nth-child(1){
                    font-size: 14px;
                    font-weight: 700;
                    color: #000000;
                    margin-top: 10px;
                    margin-left: 10px;
                   }
                   p:nth-child(2){
                    font-size: 12px;
                    color: #CCCCCC;
                    margin-left: 10px;
                    margin-top: 13px;
                   }
                   }
                }

                .bottom_shop{
                    width: 290px;
                    margin-top: 10px;

                    float: left;
                    a{
                        margin-right: 8px;
                    }
                    a:last-child{
                        margin-left: 10px;
                    }

                    
                }
            }

           .rightshopping{
            position: absolute;
            top: 60px;
            right: 0;
            width: 590px;
            height: 560px;
            background-color:#fff;
            float: right;
            

            .rightshop{
                   width: 290px;
                   height: 180px;
                   margin-bottom: 8px;
                    
                   
                  .top_shop{
                    display: block;
                    width: 290px;
                    
                   p{
                     float: left;
                   }

                    p:nth-child(1){
                    font-size: 14px;
                    font-weight: 700;
                    color: #000000;
                    margin-top: 10px;
                    margin-left: 10px;
                   }
                   p:nth-child(2){
                    font-size: 12px;
                    color: #CCCCCC;
                    margin-left: 10px;
                    margin-top: 13px;
                   }
                   }
                }

                .bottom_shop{
                    width: 290px;
                    margin-top: 10px;

                    float: left;
                    a{
                        margin-right: 8px;
                    }
                    a:last-child{
                        margin-left: 10px;
                    }

                    
                }
           }
        }


        //为你推荐
        .recommend{
            .main_title{
                text-align: center;
                line-height: 60px;

                h1{
                    font-size: 28px;
                }
            }

            .title_list{
                height: 80px;
                background-color: #fff;
                padding: 0 55px;
                box-sizing: border-box;


                li{
                    width: 180px;
                    height: 80px;
                    float: left;
                    padding-top: 22px;
                    box-sizing: border-box;


                    span{
                        width: 68px;
                        display: block;
                        margin: 0 auto;
                        text-align: center;

                        &:first-child:hover{
                            color: #fff;
                            background-color: #DD302D;
                            border-radius: 10px;
                        }
                        &:first-child{
                            font-weight: 700;
                        }
                    }
                }
            }

            .content{
                
                margin-top: 10px;

                li{
                    width: 230px;
                    height: 322px;
                    text-align: center;
                    float: left;
                    background-color: #fff;
                    margin-right: 10px;
                     
                    &:nth-child(5n){
                        margin-right: 0;
                    }

                    &:nth-child(-n+5){
                        margin-bottom: 10px;
                    }

                    img{
                        margin-top: 40px;
                        margin-bottom: 30px;
                        
                    }

                    p{
                        text-align: left;
                        width: 190px;
                        
                        color: #000000;
                        padding: 0 20px;
                        box-sizing: border-box;
                        margin-bottom: 25px;
                        font-size: 14px;
                        font-weight: 700;
                        margin-left: 10px;

                        


                        
                    }
                   p:last-child{
                    font-size: 15px;
                    margin-bottom: 20px;
                    color: #DD302D;
                   }
                }
            }
        }
}

//结尾区域
.foooter{


    
    background-color: #483E3E;

    .top_footer{
    
        p{
            float: left;
            margin-right: 10px;

            &:last-child{
                margin-right: 0;
            }
        }
    }

    .middle_footer{

        border-bottom: 2px solid #584d4d;
        padding-bottom: 50px;

        dl{
            float: left;
            width: 190px;
            height: 200px;
            margin-right: 10px;

            &:last-child{
                margin-right: 0;
            }
            dt,dd{
                color: #fff;
                margin-top: 10px;
            }

        }

        }


    .link{
       text-align: center;
       
       margin-top: 20px;
       a{
        
        margin-right: 20px;
        color: #fff;
       }
       p{
        margin-top: 20px;
        color: #fff;
       }
    }

}



//遮罩
.cover{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display:  none ;
    .login{
        width: 1008px;
        height: 636px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -504px;
        margin-top: -318px;
        background-color: #DD302D;
        border-radius: 15px;

       //广告区域
       .login_one{
        color: #fff;
        font-size: 30px;
        font-weight: 800;
        margin-top: 10px;
        margin-left: 60px;
       }
        
       ul{
        position: absolute;
        left: 50%;
        top: 60px;
        margin-left: -300px;
        margin-top: 30px;

        li{
            width: 183px;
            height: 56px;
            float: left;
             
            &:nth-child(2){
                margin: 0 40px;


            }
            img{
                float: left;
                width: 56px;
                height: 56px;
                margin-right: 10px;
            }
            p{
                color: #fff;
                font-weight: 700;
                line-height: 25px;
                &nth-child{
                    padding-top: 5px;
                }
            }

        }
       }


      //登录区域
        .cover_login{
            width: 100%;
            height: 476px;
            background-color: #fff;
            border-radius: 20px;
            margin-top: 160px;

            position: relative;
        }


        .close{
            position: absolute;
             right: -45px;
             top: -40px;
            display: block;
             width: 40px;
             height: 40px;
             text-align: center;
             line-height: 40px;
             font-weight: 800;
             border: 2px solid #fff;
             border-radius: 50%;
             color: #fff;
        }
    }




    //左侧
    .cover_left{
        width: 300px;
        height: 300px;
        text-align: center;
        padding-top: 20px;
        margin-left: 104px;
        margin-top: 105px;
        box-sizing: border-box;

        h4{
            font-size: 26px;
            margin-top: -30px;
        }

        p:nth-child(2){
            margin: 30px 0;
        }
    }

    //竖线
      .line_left{
        width: 2px;
        height: 260px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -125px;
        margin-left: -2px;
        background-color: #D9D9D9;
      }


      //右侧
      .cover_right{
        width: 350px;
        height: 40px;
        margin-right: 70px;
        margin-top: 115px;
       
        .top{

            a{
                display: block;
                width: 50%;
                text-align: center;
                height: 40px;
                line-height: 40px;
                float: left;
                font-size: 20px;
                font-weight: 700;
                margin-top: -10px;
 
                &:hover{
                    color: #DD302D;
                }


            }

        }

        .pub{
            width: 100%;
            height: 44px;
            background-color: #f7f8fc;
            border-radius: 15px;
            margin-top: 20px;
            padding-left: 10px;
            box-sizing: border-box;


            &:focus{
                background-color: blanchedalmond;
            }
        }



      }

}


.cover:target{
    display: block;
}